<template>
  <div class="p-4">
    <div class="mb-3 font-medium text-gray-700">按钮类型</div>
    <div class="flex mb-4 space-x-2">
      <el-button
        @click="() => set('primary')"
        class="w-20"
        :type="isActive('primary') ? 'primary' : ''"
      >
        默认
      </el-button>
      <el-button
        @click="() => set('success')"
        class="w-20"
        :type="isActive('success') ? 'success' : ''"
      >
        成功
      </el-button>
      <el-button
        @click="() => set('warning')"
        class="w-20"
        :type="isActive('warning') ? 'warning' : ''"
      >
        警告
      </el-button>
      <el-button
        @click="() => set('danger')"
        class="w-20"
        :type="isActive('danger') ? 'danger' : ''"
      >
        危险
      </el-button>
    </div>

    <div class="mb-3 font-medium text-gray-700">按钮文本</div>
    <el-input
      v-model="buttonText"
      placeholder="请输入按钮文本"
      @input="updateButtonText"
    ></el-input>

    <div class="mt-4 mb-3 font-medium text-gray-700">按钮大小</div>
    <el-radio-group v-model="buttonSize" @change="updateButtonSize">
      <el-radio value="large" >大</el-radio>
      <el-radio value="default">中</el-radio>
      <el-radio value="small">小</el-radio>
    </el-radio-group>

    <div class="mt-4 mb-3 font-medium text-gray-700">其他选项</div>
    <el-checkbox v-model="isRound" @change="updateIsRound">圆角按钮</el-checkbox>
    <el-checkbox v-model="isDisabled" @change="updateIsDisabled">禁用状态</el-checkbox>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { useLowCodeStore } from '../../store/lowcode'

const store = useLowCodeStore()

// 按钮文本
const buttonText = ref('')
// 按钮大小
const buttonSize = ref('default')
// 是否圆角
const isRound = ref(false)
// 是否禁用
const isDisabled = ref(false)

// 初始化时从当前选中组件获取值
onMounted(() => {
  initFromComponent()
})

// 监听选中组件变化
watch(
  () => store.nowComponent,
  () => {
    initFromComponent()
  },
  { deep: true },
)

// 从当前选中组件初始化表单值
const initFromComponent = () => {
  if (store.nowComponent && store.nowComponent.props) {
    const props = store.nowComponent.props
    buttonText.value = props.value || ''
    buttonSize.value = props.size || 'default'
    isRound.value = props.round || false
    isDisabled.value = props.disabled || false
  }
}

// 判断当前按钮类型是否激活
const isActive = (type) => {
  return store.nowComponent && store.nowComponent.props && store.nowComponent.props.type === type
}

// 设置按钮类型
const set = (type) => {
  const component = store.nowComponent
  component.props.type = type
  store.updateNowComponents(component)
}

// 更新按钮文本
const updateButtonText = () => {
  const component = store.nowComponent
  component.props.value = buttonText.value
  store.updateNowComponents(component)
}

// 更新按钮大小
const updateButtonSize = () => {
  const component = store.nowComponent
  component.props.size = buttonSize.value
  store.updateNowComponents(component)
}

// 更新圆角按钮
const updateIsRound = () => {
  const component = store.nowComponent
  component.props.round = isRound.value
  store.updateNowComponents(component)
}

// 更新禁用状态
const updateIsDisabled = () => {
  const component = store.nowComponent
  component.props.disabled = isDisabled.value
  store.updateNowComponents(component)
}
</script>
